<template>
	<div v-if="props?.invoiceDetails?.status === 7 || [2].includes(props?.invoiceDetails?.approvalStatus)" class="failure-box">
		<ExclamationCircleFilled v-color="{color: COLOR_MAP.orange}" />
		<span v-color="{color: COLOR_MAP.orange}" class="failure-reason">
			<a-tooltip :title="props?.invoiceDetails?.failureReason" placement="top">
				<span>
					{{
						props?.invoiceDetails?.status === 7
							? '失败原因'
							: `${props?.invoiceDetails?.approvalStatus === 2 ? '驳回原因' : '失败原因'}`
					}}:
				</span>
				【{{ props?.invoiceDetails?.failureReason }}】
			</a-tooltip>
		</span>
	</div>
	<!-- 发票详情 -->
	<a-descriptions title="冲红详情" :column="3" class="ant-descriptions-blockquote">
		<a-descriptions-item label="冲红状态">{{ flushingStateData[props?.invoiceDetails?.status] }}</a-descriptions-item>

		<!-- 申请类型 专票才显示 -->
		<!-- <a-descriptions-item label="申请类型">申请类型哈哈哈哈</a-descriptions-item> -->

		<a-descriptions-item label="冲红原因">{{ props?.invoiceDetails?.redReason || '-' }}</a-descriptions-item>

		<a-descriptions-item label="提交时间">{{ props?.invoiceDetails?.createTime }}</a-descriptions-item>
	</a-descriptions>

	<a-typography-text strong>
		<blockquote v-if="props?.invoiceDetails?.approvalStatus === 3 && props?.invoiceDetails?.invoiceKind === 2">信息表列表</blockquote>
	</a-typography-text>

	<vxe-grid
		v-if="props?.invoiceDetails?.approvalStatus === 3 && props?.invoiceDetails?.invoiceKind === 2"
		:data="props?.invoiceDetails?.redInfoList || []"
		ref="grid"
		v-bind="gridOptions3">
		<template #flushingState="{row}">
			<a-tag :color="redInfoData[row?.status].color" style="min-width: 70px">
				{{ redInfoData[row?.status].name }}
			</a-tag>
		</template>
		<!-- <template #redInvoiceNumber="{row}">
			<a>{{ '--' }}</a>
			<a v-if="row?.status === 4" :href="row?.downloadUrl" download="发票">
				<download-outlined class="flush-red-icon" />
			</a>
		</template> -->

		<template #action="{row}">
			<!-- 冲红状态 信息表审核展示 -->
			<a @click="handlerClick(row, 'queryResults')" v-if="row?.status === 0 && !props?.isApproval">查询结果</a>
			<span v-else>-</span>
		</template>
	</vxe-grid>

	<!-- 开票状态通过展示 冲红展示 -->
	<a-typography-text strong>
		<blockquote v-if="props?.invoiceDetails?.approvalStatus !== 1 && props?.invoiceDetails?.approvalStatus !== 4">冲红列表</blockquote>
	</a-typography-text>

	<vxe-grid
		v-if="
			props?.invoiceDetails?.invoiceInfos &&
			props?.invoiceDetails?.approvalStatus !== 1 &&
			props?.invoiceDetails?.approvalStatus !== 4
		"
		:data="props?.invoiceDetails?.invoiceInfos || []"
		ref="grid"
		v-bind="gridOptions2">
		<template #flushingState="{row}">
			<a-tag :color="invoiceDetailsStatusRedList[row?.status].color" style="min-width: 70px">
				{{ invoiceDetailsStatusRedList[row?.status].name }}
			</a-tag>
		</template>
		<template #redInvoiceNumber="{row}">
			<a>{{ row?.invoiceNo }}</a>
			<a v-if="row?.status === 4 && props?.invoiceDetails?.sourceType !== 1" :href="row?.downloadUrl" download="发票">
				<download-outlined class="flush-red-icon" />
			</a>
		</template>
		<template #action="{row}">
			<!-- 冲红状态 信息表审核展示 -->
			<!-- <a @click="handlerClick(row, 'queryResults')" v-if="row?.status === 1">查询结果</a> -->
			<!-- 冲红状态 冲红中展示 -->
			<div v-if="row?.status === 2 && !props?.isApproval">
				<a class="re-push" @click="handlerClick(row, 'rePush')">重新推送</a>
				<a @click="handlerClick(row, 'revokeFlushing')">撤销</a>
			</div>
			<!-- 审核失败 重新撤销 冲红失败 成功展示 -->
			<span v-else>-</span>
		</template>
	</vxe-grid>

	<a-typography-text strong>
		<blockquote>原发票详情</blockquote>
	</a-typography-text>

	<vxe-table border ref="grid" v-bind="gridOptions" :data="props?.invoiceDetails?.sourceInvoiceInfos">
		<vxe-column field="invoiceNo" title="发票号码" align="center">
			<template #default="{row, rowIndex}">
				<a>{{ row?.invoiceNo }}</a>
				<!-- 补录不予许下载 5 6 类型的发票也不允许下载 -->
				<a
					v-if="row.status === 4 && props?.invoiceDetails?.sourceType !== 1 && ![5, 6].includes(row.invoiceType)"
					:href="row?.downloadUrl"
					download="发票">
					<download-outlined class="flush-red-icon" />
				</a>
			</template>
		</vxe-column>
		<vxe-column field="invoiceKind" title="发票类型" align="center">
			<template #default="{row}">
				<span>{{ row?.invoiceKind === 1 ? '增值税电子普通发票' : '增值税电子专用发票' }}</span>
			</template>
		</vxe-column>
		<vxe-column field="price" title="开票金额" align="center">
			<template #default="{row}">
				<span>{{ row?.price.toFixed(2) }}</span>
			</template>
		</vxe-column>
		<vxe-column field="taxationType" title="操作" align="center">
			<template #default="{row, rowIndex}">
				<a @click="handler(row)">详情</a>
			</template>
		</vxe-column>
	</vxe-table>

	<!-- 详情 -->
	<flush-red-invoceing-detail-modal
		v-model:visible="visibles.invoiceingDetail"
		:id="props?.invoiceDetails?.id"
		:detailedData="detailedData"
		:sourceType="props?.invoiceDetails?.sourceType"></flush-red-invoceing-detail-modal>

	<!-- 重新推送 -->
	<invoice-void-push
		v-model:visible="visibles.rePush"
		@close="visibles.rePush = false"
		:invoiceType="2"
		:id="redId"
		@success="emits('close')"></invoice-void-push>

	<!-- 撤销冲红 -->
	<invoice-revoke-flushing
		v-model:visible="visibles.revokeFlushing"
		@success="emits('close')"
		:id="redId"
		@close="visibles.revokeFlushing = false"></invoice-revoke-flushing>
</template>

<script setup lang="ts">
	import {onMounted, reactive, ref, watch, toRef} from 'vue'
	import {COLOR_MAP} from 'yuxin-base/src/constant'
	import {VxeGridProps} from 'vxe-table'
	import {updateQueryResults, getInvoiceDetails} from '@/api/invoicing-history'
	import {DownloadOutlined, ExclamationCircleFilled} from '@ant-design/icons-vue'
	import ApprovalInformation from '@/components/common/approval-information.vue'
	import {invoiceDetailsStatusRedList, flushingStateData, invoiceDetailsStatusList, redInfoData} from '@/utils/billing-history-status'
	import FlushRedDetails from '@/components/finance/invoice-administration/billing-history/flush-red-details.vue'
	import FlushRedInvoceingDetailModal from '@/components/finance/invoice-administration/billing-history/flush-red-invoceing-detail-modal.vue'
	import InvoiceRevokeFlushing from '@/components/finance/invoice-administration/billing-history/invoice-revoke-flushing.vue'
	import InvoiceVoidPush from '@/components/finance/invoice-administration/billing-history/invoice-void-push.vue'

	const props = defineProps<{
		invoiceDetails?: any
		isApproval?: boolean
	}>()
	const emits = defineEmits(['close'])

	const record = reactive<any>({
		activeKey: 'flushRed',
		tableList: [
			{
				taxationType: '123456',
				feeSubjectName: '发票类型'
			}
		],

		showInvoice: false,
		approveCancel: false,
		applyFlushRed: false,
		// 判断是普票还是专票
		isSpecialTicket: true,
		pushAgain: false,
		showFooter: true
	})
	const detailedData = ref<any>({})

	const gridOptions = reactive<VxeGridProps>({
		size: 'small',
		maxHeight: 300,
		showOverflow: true,
		rowConfig: {
			isHover: true
		},
		columns: [
			{
				field: 'feeSubjectName',
				title: '费用科目',
				minWidth: 200
			},
			{
				title: '金额',
				minWidth: 150,
				slots: {
					default: 'money'
				}
			},
			{
				title: '操作',
				width: 120,
				align: 'center',
				slots: {
					default: 'operation'
				}
			}
		]
	})

	const gridOptions2 = reactive<VxeGridProps>({
		maxHeight: 300,
		border: true,
		showOverflow: true,
		rowConfig: {
			isHover: true
		},
		columns: [
			{
				title: '冲红状态',
				align: 'center',
				slots: {
					default: 'flushingState'
				},
				minWidth: 120
			},
			{
				title: '冲红发票号',
				minWidth: 150,
				slots: {
					default: 'redInvoiceNumber'
				}
			},
			{
				title: '冲红金额(元)',
				minWidth: 150,
				field: 'price'
			},

			{
				title: '原发票号',
				minWidth: 150,
				field: 'originalInvoiceNo'
			},
			{
				title: '原发票金额(元)',
				width: 150,
				field: 'price'
			},

			{
				title: '异常原因',
				width: 200,
				formatter({row}) {
					// 全电
					if ((row.invoiceKind === 3 || row.invoiceKind === 4) && row.status === 2) {
						return '开票异常，建议重新推送发票信息，或撤销重新申请:如果仍未解决，请联系运维人员。'
					} else {
						return row.failureReason
					}
				}
			},
			{
				title: '操作',
				minWidth: 100,
				align: 'center',
				fixed: 'right',
				slots: {
					default: 'action'
				}
			}
		]
	})
	const gridOptions3 = reactive<VxeGridProps>({
		maxHeight: 300,
		border: true,
		showOverflow: true,
		rowConfig: {
			isHover: true
		},
		columns: [
			{
				title: '冲红状态',
				align: 'center',
				slots: {
					default: 'flushingState'
				},
				minWidth: 120
			},
			{
				title: '冲红发票号',
				minWidth: 150,
				field: 'invoiceNo',
				formatter({row}) {
					return '--'
				}
			},
			{
				title: '冲红金额(元)',
				minWidth: 150,
				field: 'price',
				formatter({row}) {
					return '--'
				}
			},

			{
				title: '原发票号',
				minWidth: 150,
				field: 'blueInvoiceNo'
			},
			{
				title: '原发票金额(元)',
				width: 150,
				field: 'price'
			},

			{
				title: '异常原因',
				width: 200,
				field: 'reason'
			},
			{
				title: '操作',
				minWidth: 100,
				fixed: 'right',
				align: 'center',
				slots: {
					default: 'action'
				}
			}
		]
	})

	const visibles = reactive({
		invoiceingDetail: false,
		// 重新推送
		rePush: false,
		// 冲红撤销
		revokeFlushing: false
	})

	const redId = ref('')

	// 点原发票详情表格中详情触发
	const handler = (data: any) => {
		//发票详情
		visibles.invoiceingDetail = true
		getInvoiceDetailsF(data.id)
	}

	const handlerClick = (row, type) => {
		redId.value = ''
		visibles[type] = true
		if (type === 'queryResults') {
			// 查询结果
			queryResultsF(props?.invoiceDetails?.id)
		} else if (['revokeFlushing', 'rePush'].includes(type)) {
			redId.value = row.id
		}
	}

	// 冲红-开票查询结果
	const queryResultsF = (id: string) => {
		updateQueryResults(id).then(() => {
			emits('close')
		})
	}
	const getInvoiceDetailsF = (id: string) => {
		getInvoiceDetails(id).then((res: any) => {
			detailedData.value = res.data
		})
	}
</script>

<style lang="less" scoped>
	.failure-box {
		// width: 850px;
		width: 100%;
		height: 40px;
		background: #fffbe6;
		border-radius: 2px 2px 2px 2px;
		opacity: 1;
		border: 1px solid #ffe58f;
		padding-left: 10px;
		margin-bottom: 10px;
		overflow: hidden; //超出的文本隐藏
		text-overflow: ellipsis; //溢出用省略号显示
		white-space: nowrap; // 默认不换行；
		.failure-reason {
			margin: 3px 5px;
			line-height: 40px;
		}
	}
	.flush-red-icon {
		cursor: pointer;
		color: #0266ff;
		margin-left: 5px;
	}
	.re-push {
		margin-right: 5px;
	}
</style>
